<!-- 打卡 -->
<template>
    <div class="clock">
        <div class="clock-normal" v-if="state!=2">
            <div class="main-btn">
                <!-- 打卡状态 -->
                <transition name='change'>
                    <div class="btn-box" v-show="state==0">
                        <div class="btn-normal"></div>
                        <div class="btn-click" @click="btnClick()">
                            <span>{{stateName}}</span>
                        </div>
                    </div>
                </transition>
                <!-- 正在打卡 -->
                <transition name='change'>
                    <div class="btn-box" v-show="state==1">
                        <!-- <div :class="['btn-normal',{'state1':state==1}]"></div>
                        <div class="state1-gif1"></div>
                        <div class="state1-gif2"></div> -->
                        <div class="state1-gif"></div>
                        <div :class="['btn-click',{'state1':state==1}]" @click="btnClick()">
                            <span>{{stateName}}</span>
                        </div>
                    </div>
                </transition>
            </div>
            <!-- 计时 -->
            <div class="read-time">
                <p>阅读时间</p>
                <div class="time-box">
                    <span>{{minute1}}</span>
                    <span>{{minute2}}</span>
                    <i>:</i>
                    <span>{{second1}}</span>
                    <span>{{second2}}</span>
                </div>
            </div>
            <!-- 终止阅读按钮 -->
            <div class="stop-read" v-show="stopBtnShow" @click="popupShow=true">终止阅读</div>
        </div>
        <!-- 打卡完成状态 -->
        <div class="clock-finish" v-if="state==2">
            <div class="clock-day">
                <span><strong>{{cumulative}}</strong> 天</span>
                <i>已累计打卡</i>
            </div>
            <h4>今日打卡任务已完成！</h4>
            <div class="finish-time">阅读时间：{{readTimeStr}}</div>
            <div class="clock-list">
                <p>每天进步一点点</p>
                <ul class="clearfix">
                    <li class="left" v-for="(item,index) in clockList" :key="index">
                        <div class="day-box">
                            <span>{{item.day}}</span>
                            <i :class="{'dayclock':item.isclock==1}" v-show="item.isclock"></i>   
                        </div>
                    </li>
                </ul>
            </div>
            
        </div>
        <!-- 按钮 -->
        <div class="btn-box-main" v-if="state==2">
            <div class="btn-finish clearfix">
                <span class="left" @click="goWriting()">写心得</span>
                <span class="right shadow2" @click="goReturn()">返回</span>
            </div>
        </div>
        <!-- 提示弹窗 -->
        <Popup v-show="popupShow" :popupShow="popupShow" :popupType="2" :popupText="popupText" :popupTips="popupTips" @popupCancel="popupCancel" @popupSure="popupSure"></Popup>
    </div>
</template>

<script>
import Popup from '@/components/Popup'
import { axGet,axPost } from '@/api/index'
import { SSL_OP_NETSCAPE_CA_DN_BUG } from 'constants';
import { setTimeout } from 'timers';

export default {
    name: "clock",
    components:{
        Popup,
    },
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            countday:this.$route.query.countday,   //当前天数
            bookid:this.$route.query.bookid,  //书本id
            task:JSON.parse(sessionStorage.getItem("thisTask")), //任务对象
            newLocalTime:'',    //开始打卡后记录本地时间
            canClock:false,  //是否可点击
            state:0,         //按钮状态
            stateName:'',
            readTime:0,      //阅读时间，秒
            readTimeStr:'00分00秒',
            timeLoop:{},     //计时器
            minute1:0,
            minute2:0,
            second1:0,
            second2:0,
            stopBtnShow:false,
            cumulative:0,    //累计打卡
            clockList:[],
            clockListJson:[],
            //提示弹窗
            popupShow:false,
            popupText:'今日打卡任务尚未完成',
            popupTips:'提前终止打卡，本次时间依然有效',
        }
    },
    watch:{

    },
    created(){ 
        this.$parent.menuShow=false;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.getTaskTime()
            //任务每天打卡情况 
            for (let i = 0; i < this.task.dayCount; i++) {
                let list={
                    day:i+1,
                    isclock:0,
                }
                this.clockListJson.push(list)
            }
        }
        
    },
    mounted(){
    },
    destroyed(){
        //退出页面时如果为打卡状态就提交数据
        if(this.state==1){
            clearInterval(this.timeLoop)
            this.postTaskTime()
        }
        
    },
    methods:{
        // 去写书评
        goWriting(){
            this.$router.replace({path:'/writing',query: {bookid:this.bookid}});
        },
        //请求时间
        getTaskTime(){
            axGet('GetTaskLogMinute', {
                userId:this.userid,
                TaskId:this.task.taskId,
            }).then(res => {
                if(res.ResultCode==1){
                    this.canClock=true
                    this.readTime=res.Value
                    // if(this.readTime>=(this.task.takeMinute*60)){
                    //     this.state=2
                    // }
                    if(this.readTime>0){
                        this.stateName='继续阅读';
                    }else{
                        this.stateName='开始阅读';
                    }
                    this.readTimeStr=this.getTime(this.readTime)

                }else{
                    this.$LayerTip({
                        content:"获取时间失败",
                        time:1000,
                    });
                }
            })
        },
        //打卡
        btnClick(){
            if(this.canClock){
                this.stopBtnShow=false;
                if(this.state==0){
                    this.state=1;
                    this.stateName='暂停阅读';
                    this.newLocalTime=new Date();
                    // console.log(this.newLocalTime)
                    // localStorage.setItem('newLocalTime',this.newLocalTime)
                    this.timer()
                }else if(this.state==1){
                    clearInterval(this.timeLoop)
                    this.postTaskTime()
                }
            }
        },
        //提交时间
        postTaskTime(){
            axPost('PostCheckInLog', {
                userId:this.userid,
                TaskId:this.task.taskId,
                minute:Math.round(this.readTime),
            }).then(res => {
                if(res.ResultCode==1){
                    if(this.readTime>=(this.task.takeMinute*60)){
                        let isPostScore=sessionStorage.getItem("postScore2")
                        if(isPostScore && isPostScore=='true'){
                            console.log('今天已经获得积分')
                        }else{
                            this.$parent.postScore(50,2,'今日打卡完成')
                        }
                        // let taskFinish=localStorage.getItem("taskFinish"+this.task.taskId)
                        if(this.countday==this.task.dayCount){
                            localStorage.setItem("taskFinish"+this.task.taskId,1)
                            this.$router.replace({path:'/history',query: {bookid:this.bookid,isLast:1,hasWrite:1}});
                        }else{
                            this.getTaskState()
                        }
                    }else{
                        this.state=0
                        this.stateName='继续阅读'
                        this.stopBtnShow=true;
                    }
                }
            })
        },
        // 请求历史任务
        getHistory(){
            axGet('GetBookHistoryCheckInTask', {
                userId:this.userid,
                bookId:this.bookid,
            }).then(res => {
                if(res.ResultCode==1){
                    if(res.Value.length>0){
                        sessionStorage.setItem("historyList",JSON.stringify(res.Value))

                        localStorage.setItem("taskFinish"+this.task.taskId,1)
                        this.$router.push({path:'/history',query: {bookid:this.bookid,isLast:1}});
                    }else{
                        console.log('没有历史记录')
                    }
                }
            }) 
        },
        //请求当前任务打卡情况
        getTaskState(){
            axGet('GetUserBookDayTaskMinute', {
                userId:this.userid,
                TaskId:this.task.taskId,
            }).then(res => {
                if(res.ResultCode==1){
                    this.state=2
                    let listLength=Object.keys(res.Value)
                    let listJson=[]
                    for(let key in res.Value){
                        let list={
                            day:key,
                            isclock:2,   //未完成打卡
                        }
                        if(res.Value[key]>=(this.task.takeMinute*60)){
                            list.isclock=1  //完成打卡
                            this.cumulative++   //累计打卡
                        }
                        listJson.push(list)
                        this.clockListJson[key-1]=list
                    }
                    if(listLength.length>21){
                        let num=Math.ceil(listLength.length/21)
                        let groupList = [];
                        for(let i=0;i<this.clockListJson.length;i+=21){
                            groupList.push(this.clockListJson.slice(i,i+21));
                        }
                        this.clockList=groupList[num-1]
                    }else{
                        this.clockList=this.clockListJson.slice(0,21)
                    }
                    
                }else{
                    this.$LayerTip({
                        content:"获取当前任务打卡情况失败",
                        time:1000,
                    });
                }
            })
        },
        /* 时间 */
        getTime(time){
            let minute=Math.floor(time%3600/60);
            minute=minute<10?"0"+minute:minute+'';
            let second=Math.floor(time%60);
            second=second<10?"0"+second:second+'';
            
            this.minute1=minute.charAt(0)
            this.minute2=minute.charAt(1)
            this.second1=second.charAt(0)
            this.second2=second.charAt(1)

            return minute+"分"+second+"秒"; 
        },
        /* 计时器 */
        timer(){
            this.timeLoop=setInterval(()=>{
                    let nowTime=new Date()
                    let dTime=(nowTime-this.newLocalTime)/1000
                    this.newLocalTime=nowTime
                    this.readTime=this.readTime+dTime;
                    this.readTimeStr=this.getTime(this.readTime)
                    // console.log(this.readTime)
            }, 1000);
        },
        popupCancel(){
            this.popupShow=false;
        },
        popupSure(){
            this.popupShow=false;
            this.$router.go(-1)
        },
        goReturn(){
            this.$router.go(-1)
        }
        
    }
}
</script>
<style type="text/css" scoped>
.change-enter-active{
	animation-name:bounceIn;
	animation-duration:1s;
}
/* .change-leave-active{
	animation-name:fadeOut;
	animation-duration:0.5s;
} */

.clock{
    min-height: 100%;
}
.clock-normal{
    padding-top: 2.64rem;
}
.main-btn{
    margin: 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    position: relative;
}
.btn-box{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.btn-normal{
    width: 3rem;
    height: 3rem;
    background: #ccefff;
    border-radius: 50%;
    position: absolute;
	top: 50%;
    left: 50%;
    z-index: 1;
    animation: enlarge 1.5s linear 0s infinite;
    -webkit-animation: enlarge 1.5s linear 0s infinite;
}
@-webkit-keyframes enlarge {
  from {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
  }
  50% {
    -webkit-transform:translate(-50%,-50%) scale(1.1, 1.1);
    transform:translate(-50%,-50%) scale(1.1, 1.1);
  }
  to {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
  }
}
@keyframes enlarge {
  from {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
  }
  50% {
    -webkit-transform:translate(-50%,-50%) scale(1.1, 1.1);
    transform:translate(-50%,-50%) scale(1.1, 1.1);
  }
  to {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
  }
}
@-webkit-keyframes changelarge1 {
  from {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
    background: rgba(255,210,0,.2);
  }
  60% {
    -webkit-transform:translate(-50%,-50%) scale(2.5, 2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
  to {
    -webkit-transform:translate(-50%,-50%) scale(2.5, 2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
}
@keyframes changelarge1 {
  from {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
    background: rgba(255,211,0,.2);
  }
  60% {
    -webkit-transform:translate(-50%,-50%) scale(2.5, 2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
  to {
    -webkit-transform:translate(-50%,-50%) scale(2.5,2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
}
@-webkit-keyframes changelarge2 {
  from {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
    background: rgba(255,210,0,.2);
  }
  20% {
   -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
    background: rgba(255,210,0,.2);
  }
  80% {
    -webkit-transform:translate(-50%,-50%) scale(2.5,2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
  to {
    -webkit-transform:translate(-50%,-50%) scale(2.5, 2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
}
@keyframes changelarge2 {
  from {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
    background: rgba(255,211,0,.2);
  }
  20% {
    -webkit-transform:translate(-50%,-50%) scale(1, 1);
    transform:translate(-50%,-50%) scale(1, 1);
    background: rgba(255,210,0,.2);
  }
  80% {
    -webkit-transform:translate(-50%,-50%) scale(2.5,2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
  to {
    -webkit-transform:translate(-50%,-50%) scale(2.5,2.5);
    transform:translate(-50%,-50%) scale(2.5, 2.5);
    background: rgba(255,208,0,0);
  }
}
.btn-normal.state1{
    background: rgba(255,210,0,.2);
}
.state1-gif{
    width: 6.52rem;
    height: 6.52rem;
    position: absolute;
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);	
    z-index: 2;
    background: url(~@/assets/img/main/clock-btn.gif) no-repeat 0 0;
    background-size: 100%;
}
.state1-gif1{
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    position: absolute;
	top: 50%;
    left: 50%;
    z-index: 2;
    background: rgba(255,210,0,.2);
    animation: changelarge1 2.5s linear 0s infinite;
    -webkit-animation: changelarge1 2.5s linear 0s infinite;
}
.state1-gif2{
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    position: absolute;
	top: 50%;
    left: 50%;
    z-index: 3;
    background: rgba(255,210,0,.2);
    animation: changelarge2 2.5s linear 0s infinite;
    -webkit-animation: changelarge2 2.5s linear 0s infinite;
}
.btn-click{
    width: 2.6rem;
    height: 2.6rem;
    background: #02affe;
    border-radius: 50%;
    color: #fff;
    font-size: 0.48rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}
.btn-click.state1{
    background: #ffd300;
}
.btn-click span{
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
    width: 1.2rem;
    line-height: 0.56rem;
    text-align: center;
}
.read-time{
    color: #999;
    padding-top: 2.24rem;
}
.read-time p{
   font-size: 0.36rem;
   text-align: center;
   padding-bottom:0.4rem;
   line-height: 1; 
}
.time-box{
    margin: 0 auto;
    width: 5rem;
    height: 1.2rem;
    line-height: 1.2rem;
    font-size: 0.6rem;
    display:-webkit-box; 
	display:-webkit-flex; 
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.time-box span{
    display: block;
    width: 1rem;
    
    background: #f3f5f7;
    border-radius: 0.2rem;
    text-align: center;
    color: #666;
}
.time-box i{
    display: block;
}
.stop-read{
    color: #666;
    width: 1.76rem;
    font-size: 0.26rem;
    line-height: 1;
    padding: 0.14rem 0;
    text-align: center;
    border: 0.04rem solid #eff1f3; 
    border-radius: 0.34rem;
    margin: 0.84rem auto 0;
}
.clock-finish{
    text-align: center;
    padding: 0.96rem 0 1.6rem;
}
.clock-day{
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background: url(~@/assets/img/main/clock-bg-s.png) no-repeat 0 0;
    background-size: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 1.98rem;
}
.clock-day span{
    font-size: 0.36rem;
}
.clock-day strong{
    font-size: 0.84rem;
}
.clock-day i{
    display: block;
    color: #8d9db1;
    padding-top: 0.08rem;
}
.clock-finish h4{
    font-size: 0.48rem;
    font-weight: bold;
    line-height: 1;
    padding:0.62rem 0 0.36rem; 
    padding-left: 0.3rem;
}
.finish-time{
    font-size: 0.32rem;
    color: #666;
    line-height: 1;
}
.clock-list{
    width: 6.16rem;
    margin: 0.52rem auto 0;
}
.clock-list p{
    background: url(~@/assets/img/main/clock-line.png) no-repeat center 0.12rem;
    background-size: 5.76rem auto;
    font-size: 0.26rem;
    color: #999;
    line-height: 1;
    padding-bottom:0.32rem;
}
.clock-list li{
    padding: 0 0.22rem 0.26rem;
}
.day-box{
    width: 0.44rem;
    height: 0.44rem;
    position: relative;
    background: #f3f5f7;
    border-radius: 50%;
    overflow: hidden;
    color: #adb9c7; 
    text-align: center;
    line-height: 0.44rem;
}
.day-box i{
    width: 0.44rem;
    height: 0.44rem;
    position: absolute;
    top: 0;
    left: 0;
    background: url(~@/assets/img/icon/clock-f.png) no-repeat 0 0;
    background-size: 100%;
}
.day-box i.dayclock{
    background-image: url(~@/assets/img/icon/clock-t.png)
}
.btn-finish span{
    width: 47.5%;
    height: 0.86rem;
    line-height: 0.86rem;
    border-radius: 0.5rem;
}
.btn-finish .left{
    border: 1px solid #e0e0e0;
    color: #666;
    box-shadow: 0 0.1rem 0.2rem rgba(224,224,224,.3);
    -webkit-box-shadow: 0 0.1rem 0.2rem rgba(224,224,224,.3);
}
.btn-finish .right{
    background: #02affe;
    color: #fff;
    border: 1px solid #02affe;
}
.btn-return{
    width: 4.6rem;
    height: 0.9rem;
    line-height: 0.9rem;
    margin: 0.58rem auto 0;
    background: #02affe;
    color: #fff;
    border-radius: 0.5rem; 
    box-shadow:0 0.1rem 0.2rem rgba(2,175,254,0.25);
    -webkit-box-shadow:0 0.1rem 0.2rem rgba(2,175,254,0.25);
}
</style>